<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
        font-size: 12px;
    }
    #container{
        width: 70%;
        margin: 150px auto;
        height: 500px;
        background-color: gainsboro;
        display: flex;
        flex-direction: column;
    }
    #container #huizong{
        flex:0 0 45px;
        line-height: 45px;
        text-align: center;
        background-color: darkgray;
    }
    #container #title{
        flex: 0 0 80px;
        line-height: 80px;
        text-align: center;
        font-size: 40px;
    }
    #container #center{
        flex: 1;
        display: flex;
        justify-content: space-around;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    #container #center #shouru{
        width: 450px;
    }
    #center table{
        width: 100%;
        border: 1px solid white;
        border-collapse: collapse;
    }
    #center table h1{
        padding: 10px;
        font-size: 20px;
    }
    #center table td{
        border: 1px solid white;
        text-align: center;
        height: 30px;
    }
    #center table td:hover{
        background-color: white;
        color: black;
    }
    #container table tbody tr:nth-child(odd){
        background-color: wheat;
    }
    #container table tbody tr:nth-child(even){
        background-color: lightyellow;
    }
    #container table thead tr{
        background-color: cornsilk;
    }
    #container #center #zhichu{
        width: 450px;
    }
</style>
<body>
    <div id="container">
        <div id="title">
            当月支出与收入情况
        </div>
        <div id="center">
            <div id="shouru">
                <table>
                    <caption>
                        <h1>当月收入情况</h1>
                    </caption>
                    <thead>
                        <tr>
                            <td>序号</td>
                            <td>类别</td>
                            <td>金额</td>
                            <td>日期</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>工资</td>
                            <td>9000</td>
                            <td>2020-09-01</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>工资</td>
                            <td>9000</td>
                            <td>2020-09-01</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>工资</td>
                            <td>9000</td>
                            <td>2020-09-01</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="zhichu">
                <table>
                    <caption>
                        <h1>当月支出情况</h1>
                    </caption>
                    <thead>
                    <tr>
                        <td>序号</td>
                        <td>类别</td>
                        <td>金额</td>
                        <td>日期</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>工资</td>
                        <td>9000</td>
                        <td>2020-09-01</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>工资</td>
                        <td>9000</td>
                        <td>2020-09-01</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>工资</td>
                        <td>9000</td>
                        <td>2020-09-01</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div id="huizong">
            总支出：20000    总收入：15000   余额：-5000
        </div>
    </div>
</body>
</html>